<template>
  <div>
      <wx-picker mode="multiSelector" :range="multiArray" @columnchange="columnchange" :value="multiIndex" @change='pickchange'>
            <div class='j-addrM-selectArea' :class="{selectArea: procityareaInfo.areaBtnTextEdit.length?false:selectArea}">
                <span>{{ procityareaInfo.areaBtnTextEdit.length ? procityareaInfo.areaBtnTextEdit:'点击选择地址'}}</span>
            </div>
        </wx-picker>
  </div>
</template>

<script>
import Vue from 'vue'
import { getProvince, getCity, getArea } from '@/api/login'

export default Vue.extend({
    data() {
        return {
            multiArray:[],  // 三维数组数据
            multiIndex:[0, 0, 0], // 默认的下标
            step:0, // 默认显示请选择
            provinceList: [],
            provinceArr: [],
            currnetProvinceKey: '',
            cityArr: [],
            cityList: [],
            currnetCityKey: '',
            areaArr: [],
            areaList: [],
            currnetAreaKey: '',
            procityareaInfo: {
                areaBtnTextEdit: '',
                province_id: '',
                city_id: '',
                area_id: '',
                province_name:'',
                city_name:'',
                area_name:''
            }
        }
    },
    mounted() {
        this.getProvinceFn()
    },
    methods: {
        columnchange(e){
            // console.log(e.detail)   // {column: 2, value: 1}
            var column = e.detail.column  // 当前改变的列
            var data = {
            multiIndex: JSON.parse(JSON.stringify(this.multiIndex)),
            multiArray: JSON.parse(JSON.stringify(this.multiArray))
            }
            data.multiIndex[column] = e.detail.value;
            switch (e.detail.column)  { // 此时的改变列数
            case 0:
                var currentProvinceKey = this.provinceList[e.detail.value].province_id
                this.getCityFn({ province_id: currentProvinceKey })  // 获取当前key下面的市级数据
                data.multiIndex[1] = 0  // 将市默认选择第一个
                data.multiIndex[2] = 0
            break;
            case 1:
                var currentCitykey = this.cityList[e.detail.value].city_id
                this.getAreaFn({city_id:currentCitykey})   // 获取门店
                data.multiIndex[2] = 0  // 门店默认为第一个
            break;
            }
            this.multiIndex = data.multiIndex
            this.multiArray = data.multiArray
        },
        pickchange(e){ // picker发送选择改变时候触发 通过e.detail.value获取携带的值
            // console.log(e.detail.value)  //   [0,1,2]
            this.multiIndex = e.detail.value  // 直接更新即可

            this.procityareaInfo.areaBtnTextEdit = this.provinceList[this.multiIndex[0]].province_name + this.cityList[this.multiIndex[1]].city_name + this.areaList[this.multiIndex[2]].area_name

            this.procityareaInfo.province_id = this.provinceList[this.multiIndex[0]].province_id
            this.procityareaInfo.city_id = this.cityList[this.multiIndex[1]].city_id
            this.procityareaInfo.area_id = this.areaList[this.multiIndex[2]].area_id
            this.procityareaInfo.province_name = this.provinceList[this.multiIndex[0]].province_name
            this.procityareaInfo.city_name = this.cityList[this.multiIndex[1]].city_name
            this.procityareaInfo.area_name = this.areaList[this.multiIndex[2]].area_name

            this.$emit('procityareaInfo', this.procityareaInfo)
        },
        /**
         * 获取省份接口
         */
        getProvinceFn(data) {
            getProvince(data).then(res => {
                if (res.status == 1) {
                    const resp = res.data
                    var provinceList = [...resp] // 放在一个数组里面
                    var provinceArr = resp.map((item) => { return item.province_name }) // 获取数据里面的value值，就是只用数据的名称
                    this.multiArray = [provinceArr, [], []] // 更新三维数组 更新后长这样 [['江苏省', '福建省'],[],[]]
                    this.provinceList = provinceList   // 省级原始数据
                    this.provinceArr = provinceArr    // 省级所有的名称
                    var defaultCode = this.provinceList[0].province_id  // 使用第一项当作参数获取市级数据
                    if (defaultCode){
                        this.currnetProvinceKey = defaultCode  // 保存在当前的省级key
                        this.getCityFn({ province_id: defaultCode })  // 获取市级数据
                    }
                } else {
                    this.$Error(res.msg)
                }
            })
        },
        /**
         * 获取城市接口
         */
        getCityFn(data) {
            getCity(data).then(res => {
                this.loading = false
                if (res.status == 1) {
                    const resp = res.data
                    var cityArr = resp.map((item) => { return item.city_name })
                    var cityList = [...resp]
                    this.multiArray = [this.provinceArr, cityArr, []],  // 更新三维数组 更新后长这样 [['江苏省', '福建省'], ['徐州市'], []]
                    this.cityList = cityList,  // 保存下市级原始数据
                    this.cityArr = cityArr  // 市级所有的名称
                    var defaultCode = this.cityList[0].city_id  // 用第一个获取门店数据
                    if (defaultCode){
                    this.currnetCityKey = defaultCode  // 存下当前选择的城市key
                    this.getAreaFn({city_id: defaultCode}) // 获取门店数据
                    }
                } else {
                    this.$Error(res.msg)
                }
            })
        },
        /**
         * 获取地区接口
         */
        getAreaFn(data) {
            getArea(data).then(res => {
                this.loadingArea = false
                if (res.status == 1) {
                    const resp = res.data
                    var areaArr = resp.map((item) => { return item.area_name })
                    var areaList = [...resp]
                    this.multiArray = [this.provinceArr, this.cityArr, areaArr],  // 更新三维数组 更新后长这样 [['江苏省', '福建省'], ['徐州市'], []]
                    this.areaList = areaList,  // 保存下市级原始数据
                    this.areaArr = areaArr  // 市级所有的名称
                    var defaultCode = this.areaList[0]?this.areaList[0].area_id:undefined  // 用第一个获取门店数据
                    if (defaultCode){
                    this.currnetAreaKey = defaultCode  // 存下当前选择的城市key
                    }
                } else {
                    this.$Error(res.msg)
                }
            })
        }
    }
})
</script>

<style>

</style>
